<<<<<<< HEAD
/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:28:28 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-06 21:28:28 */
=======
/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:28:28
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:28:28
 */
>>>>>>> ba93636 (前端建设完成)

<template>
  <div class="register-container">
    <div class="form-container">
      <h1>用户注册</h1>
      <p v-if="error" class="error-message">{{ error }}</p>

      <form @submit.prevent="handleRegister" class="register-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="username"
            required
            placeholder="请输入用户名（3-20个字符）"
            autocomplete="username"
          />
        </div>

        <div class="form-group">
          <label for="email">电子邮箱</label>
          <input
            type="email"
            id="email"
            v-model="email"
            required
            placeholder="请输入有效的电子邮箱"
            autocomplete="email"
          />
        </div>

        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            required
            placeholder="请输入密码（至少8个字符）"
            autocomplete="new-password"
          />
        </div>

        <div class="form-group">
          <label for="confirmPassword">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            v-model="confirmPassword"
            required
            placeholder="请再次输入密码"
            autocomplete="new-password"
          />
        </div>

        <div class="form-group agreement">
          <input type="checkbox" id="agreement" v-model="agreedToTerms" />
          <label for="agreement" class="agreement-label">
            我已阅读并同意<a href="#" @click.prevent="showTerms">《用户协议》</a>和<a
              href="#"
              @click.prevent="showPrivacy"
              >《隐私政策》</a
            >
          </label>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn-register" :disabled="loading || !agreedToTerms">
            {{ loading ? '注册中...' : '注册' }}
          </button>
          <router-link to="/login" class="login-link"> 已有账号？立即登录 </router-link>
        </div>
      </form>
    </div>

    <div class="register-image">
      <div class="image-container">
        <img :src="loginImage" alt="中国非物质文化遗产" class="heritage-image" />
        <div class="image-source">素材来源于中国非物质文化遗产网</div>
      </div>
      <div class="image-text">
        <h2>加入我们，探索非遗文化</h2>
        <p>注册成为会员，参与评论、点赞、分享，共同传承中华文化瑰宝</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/user'
import loginImage from '../../assets/loginAndRegister.png'

export default {
  name: 'RegisterView',
  setup() {
    const userStore = useUserStore()
    const router = useRouter()

    const username = ref('')
    const email = ref('')
    const password = ref('')
    const confirmPassword = ref('')
    const agreedToTerms = ref(false)

    const loading = computed(() => userStore.loading)
    const error = computed(() => userStore.error)

    // 处理注册
    const handleRegister = async () => {
      if (loading.value) return

      // 验证表单
      if (!username.value || !email.value || !password.value || !confirmPassword.value) {
        userStore.error = '请填写所有必填字段'
        return
      }

      if (username.value.length < 3 || username.value.length > 20) {
        userStore.error = '用户名长度必须在3-20个字符之间'
        return
      }

      if (password.value.length < 8) {
        userStore.error = '密码长度必须至少为8个字符'
        return
      }

      if (password.value !== confirmPassword.value) {
        userStore.error = '两次输入的密码不一致'
        return
      }

      if (!agreedToTerms.value) {
        userStore.error = '必须同意用户协议和隐私政策'
        return
      }

      // 验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(email.value)) {
        userStore.error = '请输入有效的电子邮箱地址'
        return
      }

      // 提交注册
      const success = await userStore.register({
        username: username.value,
        email: email.value,
        password: password.value,
      })

      if (success) {
        // 注册成功，重定向到首页
        router.push('/')
      }
    }

    // 显示用户协议
    const showTerms = () => {
      alert('用户协议内容')
      // 实际应用中应该打开一个对话框显示用户协议内容
    }

    // 显示隐私政策
    const showPrivacy = () => {
      alert('隐私政策内容')
      // 实际应用中应该打开一个对话框显示隐私政策内容
    }

    return {
      username,
      email,
      password,
      confirmPassword,
      agreedToTerms,
      loading,
      error,
      handleRegister,
      showTerms,
      showPrivacy,
      loginImage,
    }
  },
}
</script>

<style scoped>
.register-container {
  display: flex;
  min-height: calc(100vh - 180px);
  background-color: var(--light-color);
}

.form-container {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
}

.register-image {
  flex: 1;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.image-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin-bottom: 2rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.heritage-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-source {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.image-text {
  text-align: center;
  padding: 0 2rem;
}

.image-text h2 {
  color: var(--primary-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agreement {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.agreement-label {
  font-weight: normal;
  font-size: 0.9rem;
}

.agreement-label a {
  color: var(--primary-color);
  text-decoration: none;
}

.agreement-label a:hover {
  text-decoration: underline;
}

label {
  font-weight: bold;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  transition: var(--transition);
}

input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(197, 48, 48, 0.2);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-register {
  background-color: var(--primary-color);
  color: white;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-register:hover {
  background-color: #b42c2c;
}

.btn-register:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.login-link {
  text-align: center;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.9rem;
}

.login-link:hover {
  text-decoration: underline;
}

.error-message {
  background-color: #fef2f2;
  color: var(--danger-color);
  padding: 0.8rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .register-container {
    flex-direction: column;
  }

  .form-container {
    padding: 2rem 1rem;
    max-width: 100%;
  }

  .register-image {
    order: -1;
    padding: 1rem;
  }

  .image-container {
    height: 200px;
    margin-bottom: 1rem;
  }
}
</style>
